<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #div_out {
        border: 1px black;
        background-color: lightgray;
        width: 300px;
        border-radius: 30px;
        padding: 20px;

    }

    #div_inner {
        padding: 20px;
    }

    input {
        width: 180px;
        height: 20px;
        margin: 10px;
    }

    select {
        width: 188px;
        margin: 10px;
        height: 30px;
    }

    textarea {
        width: 180px;
        height: 50px;
        margin: 10px;
    }
</style>

<script>

    function register() {
        var name = document.getElementById("name").value;
        var password = document.getElementById("password").value;
        var info = document.getElementById("info").value;

        if (name != "admin") {
            alert("用户名错误，只能是admin");
            return;
        }

        if (password == '') {
            alert("请输入密码");
            return;
        }

        if (info == '') {
            alert("请输入自我介绍");
            return;
        }

        alert("自我介绍:" + info);

    }
</script>

<body>
    <div id="div_out">
        <form onsubmit="register()">
            <table border="1px" align="center" cellspacing=0>

                <caption>
                    <h2>用户注册</h1>
                </caption>

                <tr>
                    <td align="center">用户名:</td>
                    <td><input id="name"></td>
                </tr>
                <tr>
                    <td align="center">密码:</td>
                    <td><input type="password" id="password"></td>
                </tr>

                <tr>
                    <td align="center">性别:</td>
                    <td>
                        <select>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="center">学历:</td>
                    <td>
                        <select>
                            <option>本科</option>
                            <option>专科</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="center">自我介绍:</td>
                    <td><textarea id="info"></textarea></td>
                </tr>
                <tr>

                    <td colspan="2" align="center">
                        <div id="div_inner">
                            <input type="reset" value="清空">

                            <input type="submit" value="注册">
                        </div>

                    </td>
                </tr>
            </table>

        </form>
    </div>
</body>

</html>